﻿
@{
    ViewData["Title"] = "DynamicIndex";
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>

    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

    <style>
        dd {
            cursor: pointer;
        }

        .site-active {
            padding-left: 20px !important;
        }
    </style>
</head>

<body yyy="l李四" class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">

        <div class="layui-header">
            <div class="layui-logo">
                <img src="/images/logo/aac0171a0e088f3de920def206896d81.png" width="200px" height="55px" />
            </div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="~/images/logo/7f05efaf1b2c6d27f45c87a70d2291be.jpg" class="layui-nav-img">
                        <span id="name"></span>
                    </a>
                </li>
                <li class="layui-nav-item"><a href="/home/login">退出</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test" id="leftmenu">

                    @* <li class="layui-nav-item layui-nav-itemed"> *@
                    @*     <a class="" href="javascript:;">RBAC</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="用户" tab-url="/Account/Index" tab-layid="2">用户</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="角色" tab-url="/Role/Index" tab-layid="3">角色</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="权限" tab-url="/Permission/Index" tab-layid="4">权限</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="用户角色" tab-url="/mainData/CustomerDataIndex" tab-layid="5">用户角色</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="角色权限" tab-url="/RolePermission/RolePermissionIndex" tab-layid="6">角色权限</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@

                    @* <li class="layui-nav-item layui-nav-itemed"> *@
                    @*     <a class="" href="javascript:;">主数据</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="物料产品管理" tab-url="/MainData/MaterialManage" tab-layid="7">物料产品管理</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="物料产品分类" tab-url="/Material/MaterialView" tab-layid="8">物料产品分类</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="计量单位" tab-url="/mainData/MeasureUnitIndex" tab-layid="9">计量单位</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="客户管理" tab-url="/mainData/CustomerDataIndex" tab-layid="10">客户管理</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="供应商管理" tab-url="/MainData/Supplierpage" tab-layid="11">供应商管理</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="车间设置" tab-url="/WorkshopsSetups/ShowWorkshopsSetups" tab-layid="12">车间设置</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="工作站" tab-url="/WorkStation/Index" tab-layid="13">工作站</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@

                    @* <li class="layui-nav-item"> *@
                    @*     <a href="javascript:;">仓库管理</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="仓库设置" tab-url="/WarehouseSet/WarehouseSetIndex" tab-layid="77">仓库设置</a></dd> *@
                    @*         <dd><a href="javascript:;">库存现有量</a></dd> *@
                    @*         <dd><a href="">采购入库</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="物料产品分类" tab-url="/NoticeOfArrival/Index" tab-layid="4">到货通知</a></dd> *@
                    @*         <dd><a href="">供应商退货</a></dd> *@
                    @*         <dd><a href="">生产领料</a></dd> *@
                    @*         <dd><a href="">生产退料</a></dd> *@
                    @*         <dd><a href="">产品入库</a></dd> *@
                    @*         <dd><a href="">销售出库</a></dd> *@
                    @*         <dd><a href="">销售退货</a></dd> *@
                    @*         <dd><a href="">转移调拨</a></dd> *@
                    @*         <dd><a href="">赋码管理</a></dd> *@
                    @*         <dd><a href="">装箱管理</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="SN码" tab-url="/Warehouse/WarehouseIndex">SN码</a></dd> *@
                    @*         <dd><a href="">库存盘点</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@

                    @* <li class="layui-nav-item"> *@
                    @*     <a href="javascript:;">设备管理</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="设备类型设置" tab-url="/1/1" tab-layid="1">设备类型设置</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="设备台账" tab-url="/1/2" tab-layid="2">设备台账</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="点检保养项目" tab-url="/CheckMaintenanceItem/CheckMaintenanceItemView" tab-layid="3">点检保养项目</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="点检保养计划" tab-url="/1/4" tab-layid="4">点检保养计划</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="维修单" tab-url="/1/5" tab-layid="5">维修单</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@

                    @* <li class="layui-nav-item"> *@
                    @*     <a href="javascript:;">工装夹具管理</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="类型设置" tab-url="" tab-layid="5">类型设置</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="工装夹具台账" tab-url="" tab-layid="6">工装夹具台账</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@

                    @* <li class="layui-nav-item"> *@
                    @*     <a href="javascript:;">生产管理</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="生产工单" tab-url="" tab-layid="5">生产工单</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="工序设置" tab-url="/ProcedureSetting/ProcedureSetting" tab-layid="6">工序设置</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="工艺流程" tab-url="" tab-layid="6">工艺流程</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="生产排产" tab-url="" tab-layid="6">生产排产</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="生产报工" tab-url="" tab-layid="6">生产报工</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@

                    @* <li class="layui-nav-item"> *@
                    @*     <a href="javascript:;">质量管理</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="常见缺陷" tab-url="" tab-layid="5">常见缺陷</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="检测项设置" tab-url="" tab-layid="6">检测项设置</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="检测模板" tab-url="" tab-layid="6">检测模板</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="待检任务" tab-url="" tab-layid="6">待检任务</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="来料检验" tab-url="" tab-layid="6">来料检验</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="过程检验" tab-url="" tab-layid="6">过程检验</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="出货检验" tab-url="" tab-layid="6">出货检验</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@

                    @* <li class="layui-nav-item"> *@
                    @*     <a href="javascript:;">排班管理</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="排班设置" tab-url="" tab-layid="5">排班设置</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="排班计划" tab-url="" tab-layid="6">排班计划</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="节假日设置" tab-url="" tab-layid="6">节假日设置</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="排班日历" tab-url="" tab-layid="6">排班日历</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@

                    @* <li class="layui-nav-item"> *@
                    @*     <a href="javascript:;">报表管理</a> *@
                    @*     <dl class="layui-nav-child"> *@
                    @*         <dd><a class="site-active" tab-name="排班设置" tab-url="" tab-layid="5">报表清单</a></dd> *@
                    @*         <dd><a class="site-active" tab-name="排班计划" tab-url="" tab-layid="6">报表设计</a></dd> *@
                    @*     </dl> *@
                    @* </li> *@


                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 tab简单风格 class= layui-tab-brief -->
            <div class="layui-tab " lay-allowClose="true" lay-filter="tabList">
                <ul class="layui-tab-title">
                </ul>
                <div class="layui-tab-content">
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>


    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script src="~/libs/jquery/jquery.js"></script>
    @* <script src="~/libs/layui-v2.5.6/layui/lay/modules/leftmenu.js"></script> *@

    <script>


        layui.use(['element', 'jquery'], function () {
            var element = layui.element,
                $ = layui.jquery;
                //获取主数据进行反填

                function mainUnitListOne() {
                    $.ajax({
                        url: '/Account/Backfill',
                        type: 'get',
                        data: {
                            id: @ViewBag.id
                        },
                        dataType: 'json',
                        success: function (res) {
                            console.log(res)
                            console.log(@ViewBag.id)
                            $('#name').text(res.nickname);
                        }
                    });
                }

                mainUnitListOne()
                 loadmenu();

            //触发事件
            var active = {
                tabAdd: function (name, url, layid) {
                    if (url != "" && url != null && url != undefined) {
                        element.tabAdd('tabList', {
                            title: name //'选项卡的标题'
                            , content: '<iframe id="iframeMain" style="width: 100%" ; height="100%" ; scrolling="no" frameborder="no" src="' + url + '"></iframe>'//'选项卡的内容' //支持传入html
                            , id: layid//'选项卡标题的lay-id属性值'
                        });
                    }
                },
                tabChange: function (layid) {
                    element.tabChange('tabList', layid);
                }
            }

            //当点击有siteactive属性的标签时，即左侧菜单栏中内容 ，触发点击事件
            $('.site-active').on("click", function () {
                var dataid = $(this);
                var name = $(this).attr("tab-name");
                var url = $(this).attr("tab-url");
                var tab_layid = dataid.attr("tab-layid");

                //1、 判断tab-layid=layid的tab页是否打开
                if ($(".layui-tab-title li").length <= 0)
                {
                    //1.1 初始状态：1个Tab页也没有打开
                    active.tabAdd(name, url, tab_layid); //添加tab页
                    active.tabChange(tab_layid)//转到该tab页
                }
                else
                {
                    //1.2   判断该Tab页是否已打开
                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == tab_layid) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(name, url, tab_layid); //1.2.1  该Tab页未打开，则打开该tab页
                    }
                    active.tabChange(tab_layid)//1.2.2 转到该tab页
                }
                FrameWH();  //计算ifram层的大小
            });

            function FrameWH() { //计算ifram层的大小
                var h = $(window).height();
                $("iframe").css("height", h + "px");
            }

            $(window).resize(function () {
                FrameWH();
            })

            // $(function () {
            //     active.tabAdd('生产管理系统', "/mainData/MeasureUnitAddView",1); 打开tab页
            //     active.tabChange(1)转到该tab页
            //     FrameWH();
            // })
        });


        function loadmenu() {
            console.log("接收到的 ID: " + @ViewBag.id);
            $.ajax({
                type: "get",
                url: "/Account/FiveTables",
                data: { id: @ViewBag.id },
                async: false,
                success: function (menus) {
                    console.log(menus)
                    var tmphtml = initmenu(menus);
                    console.log(tmphtml)
                    $('#leftmenu').html(tmphtml);
                }
            })
        }


        function initmenu(menus) {
            function generateMenuItems(items, level) {
                var tmphtml = '';
                for (var i = 0; i < items.length; i++) {
                    if (items[i].state) {
                        var itemClass = level === 0 ? 'layui-nav-item layui-nav-itemed' : 'layui-nav-item';
                        tmphtml += '<li class="' + itemClass + '">';

                        if (items[i].url && items[i].url !== '') {
                            tmphtml += '<a class="site-active" style="cursor: pointer;" tab-url="' + items[i].url + '" tab-name="' + items[i].title + '" tab-layid="' + items[i].id + '">' + items[i].title + '</a>';
                        } else {
                            tmphtml += '<a class="site-active" style="cursor: pointer;">' + items[i].title + '</a>';
                        }

                        if (items[i].childrens && items[i].childrens.length > 0) {
                            tmphtml += '<dl class="layui-nav-child">';
                            tmphtml += generateMenuItems(items[i].childrens, level + 1);
                            tmphtml += '</dl>';
                        }

                        tmphtml += '</li>';
                    }
                }
                return tmphtml;
            }

            return generateMenuItems(menus, 0);
        }






    </script>
</body>
</html>

